<template>
    <div class="column" @contextmenu.prevent='rightclick(item)'>
        <!-- <el-tag :type="item.status == '00'?'success':item.status == '01'?'warning':item.status == '02'?'':item.status == '05'?'danger':item.status == '04'?'success':item.status == '06'?'warning':'warning'" class="column-more-status" v-if="item.docType=='05'">{{item.status|statusfilters}}</el-tag> -->
        <div class="column-more">
            <el-popover placement="bottom" trigger="hover">
                <div class="popover-content">
                    <!-- <span class="popover-content-title" @click="loadDetails">详情</span> -->
                    <span v-if="item.type == 'doc'" class="popover-content-title" @click="download(item)">下载</span>
                    <span class="popover-content-title" @click="godetails(item)">详情</span>
                    <span class="popover-content-title" @click="loadDel(item)">删除</span>
                </div>
                <i slot="reference" class="document-left-tree-more el-icon-more"></i>
            </el-popover>
            <!-- <folderPopover   :documentType="documentType" :functionIndex="functionIndex" :treeData="item" :listQuery="listQuery"></folderPopover> -->
            <!-- <folderPopoverTWO ref="folderPopover" v-if="item.type == 'doc'" :documentType="documentType" :functionIndex="functionIndex" :treeData="item" :listQuery="listQuery"></folderPopoverTWO> -->
        </div>
        <div class="column-img" @click="documentClick(item)" @contextmenu.prevent='rightclick(item)'>
            <el-image v-if="item.type == 'dir'" style="width: 100%;height: 100%;" :src="folderImg"></el-image>
            <el-image v-if="item.type == 'doc'" style="width: 100%;height: 100%;" :src="fileImg"></el-image>
        </div>
        <span class="column-title" @click="documentClick(item)" @contextmenu.prevent='rightclick(item)'>{{item.name}}</span>
        <!-- <details-content ref="details" :treeData="treeData"></details-content> -->
        <el-dialog title="提示" class="details" :modal-append-to-body="false" :visible.sync="detailsVisible" width="360px">
            <div class="details-item">
                <span class="details-item-title">文件标题</span>
                <span class="details-item-content">{{folderForm.name}}</span>
            </div>
            <!-- <div class="details-item">
                <span class="details-item-title">文件类型</span>
                <span class="details-item-content">{{folderForm.docType | docType}}</span>
            </div> -->
            <div class="details-item">
                <span class="details-item-title">创建者</span>
                <span class="details-item-neme">{{folderForm.createBy}}</span>
            </div>
            <div class="details-item">
                <span class="details-item-title">创建时间</span>
                <span class="details-item-content">{{folderForm.createTime}}</span>
            </div>
            <!-- <div class="details-item">
                <span class="details-item-title">文档描述</span>
                <span class="details-item-content">{{folderForm.content}}</span>
            </div> -->
        </el-dialog>
    </div>
</template>

<script>
import folderPopover from "./folderPopover.vue";
import { del } from "@/api/dir";
import { softDelete as docDel } from "@/api/doc.js";
import detailsContent from "../../document/components/details";
// import folderPopoverTWO from "./folderPopoverTWo.vue"
export default {
    data() {
        return {
            folderImg:
                require("../../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
            fileImg:
                require("../../../../img/140a48decfb0a656a23a22e2cbb6bee8.svg"),
            folderForm: {},
            detailsVisible: false,
        };
    },
    filters: {
        statusfilters(val) {
            if (val == "00") {
                return "已上传";
            } else if (val == "01") {
                return "待审批";
            } else if (val == "02") {
                return "审批中";
            } else if (val == "05") {
                return "已驳回";
            } else if (val == "04") {
                return "已审批";
            } else if (val == "06") {
                return "已过期";
            } else if (val == "07") {
                return "已作废";
            }
        },
        docType(data) {
            if (data == "00") {
                return "项目附件";
            } else if (data == "01") {
                return "任务附件";
            } else if (data == "02") {
                return "产品文档";
            } else if (data == "04") {
                return "企业文档";
            } else if (data == "05") {
                return "合同文档";
            } else if (data == "06") {
                return "知识库";
            }
        },
    },
    components: {
        folderPopover,
        detailsContent,
        // folderPopoverTWO
    },
    props: ["item", "listQuery", "functionIndex", "documentType"],
    methods: {
        godetails(data) {
            console.log(data);
            this.detailsVisible = true;
            this.folderForm = data;
        },
        download(data) {
            window.open(item.docFilePath[0].fileUrl, "_blank");
        },
        loadDel(data) {
            if (data.type == "dir") {
                const params = new URLSearchParams();
                params.append("ids", data.dirId);
                this.$confirm("确认删除?(有子目录时不可删除)", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    del(params).then((res) => {
                        this.$message("删除成功!");
                        this.$emit("dirdelclick");
                    });
                });
            } else {
                const params = new URLSearchParams();
                params.append("ids", data.docId);
                this.$confirm("确认删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    docDel(params).then((res) => {
                        this.$message("删除成功!");
                        this.$emit("dirdelclick");
                    });
                });
              
            }
        },
        rightclick(item) {
            if (item.type == "doc") {
                console.log(this.item);
                this.$refs.folderPopover.visibletypechang();
            }
        },
        // 预览文档
        documentClick(item) {
            // console.log(item)
            var _this = this;
            if (item.type == "dir") {
                this.$emit("dirClick", item);
                // window.open(item.filePath, '_system') //url为访问的地址
            } else {
                // window.open('https://view.officeapps.live.com/op/view.aspx?src=' + item.filePath)
                if (item.docType == "05") {
                    var data = {
                        docType: item.docType,
                        dirId: item.dirId,
                        docId: item.docId,
                    };
                    this.$router.push({
                        path: "/contract/details",
                        query: { data: JSON.stringify(data) },
                    });
                } else if (item.docType == "04") {
                    var data = {
                        docType: item.docType,
                        dirId: item.dirId,
                        docId: item.docId,
                    };
                    this.$router.push({
                        path: "/document/details",
                        query: { data: JSON.stringify(data) },
                    });
                } else {
                    // window.open('https://view.officeapps.live.com/op/view.aspx?src=' + item.docFilePath[0].fileUrl)
                    window.open(item.docFilePath[0].fileUrl, "_blank");
                }
            }
        },
    },
};
</script>

<style scoped>
.column {
    position: relative;
    /* width: 160px;
    height: 185px; */
    width: 120px;
    height: 150px;
    border: 1px solid #e3e9ed;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.column:hover {
    background-color: rgb(236, 245, 255);
}
.column-more {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 12px;
}
.column-more-status {
    position: absolute;
    left: 6px;
    top: 6px;
}

.column-img {
    width: 70px;
    height: 70px;
    cursor: pointer;
}

.column-title {
    padding: 0 10px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2e405e;
    font-size: 12px;
    margin-top: 12px;
    text-align: center;
    cursor: pointer;
}

.column-title:hover {
    color: #2c7ef8;
}
.document-left-tree-more {
    font-size: 12px;
}
.popover-content-title {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    cursor: pointer;
}

.popover-content-title:hover {
    background-color: #f5f6f8;
}

/deep/.el-popover {
    padding: 0;
}

.details-item {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
}

.details-item-title {
    color: #909aaa;
    font-size: 14px;
}

.details-item-content {
    color: #2e405e;
    font-size: 14px;
    margin-top: 4px;
}

.details-item-neme {
    color: #2c7ef8;
    font-size: 14px;
    margin-top: 4px;
}

/deep/.el-dialog .el-dialog__footer {
    border-color: white;
}

/deep/.el-dialog__title {
    font-weight: bold;
    font-size: 16px;
}
.documentClick_item {
    margin-bottom: 10px;
    cursor: pointer;
}
</style>
